<div style="padding:20px">
	<div class="row">
		<div class="col-sm-3 today">
			<div class="tile-stats tile-red">
				<div class="icon"><i class="entypo-users"></i></div><div class="num">0</div><h3>今日流量 (在线人数: <span class="online"></span>)</h3><p></p>
			</div>
		</div>
		<div class="col-sm-3 yesterday">
			<div class="tile-stats tile-green"><div class="icon"><i class="entypo-chart-bar"></i></div><div class="num">0</div><h3>昨日流量</h3><p></p></div>	
		</div>
		<div class="col-sm-3 month">
			<div class="tile-stats tile-aqua"><div class="icon"><i class="entypo-mail"></i></div><div class="num">0</div><h3>本月合计</h3><p></p></div>
		</div>
		<div class="col-sm-3 predict">
			<div class="tile-stats tile-blue"><div class="icon"><i class="entypo-rss"></i></div><div class="num">0</div><h3>预计今日</h3><p></p></div>
		</div>
	</div>

	<br />

	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-primary" id="charts_env">
				<div class="panel-heading" style="border:1px solid #cecece;height:38px">
					<div class="panel-title">实时流量统计</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				<div class="panel-body no-padding">
					<div id="traffic_chart" class="morrischart" style="height:380px;width:100%"></div>
				</div>
			</div>	
		</div>
	</div>

</div>
<script>
var statsId='<?php echo $config['stats_id']?>';
$.getJSON('stats/get_profile',function(c){
	if(c.online) $('.online').text(c.online);
	if(!c.profile) return;
	$('.today .num').text(c.profile[1].values[0].replace('IP','').trim()).next().next().html('IP访问量: <b>'+c.profile[1].values[0]+'</b> 页面浏览量: <b>'+c.profile[1].values[1]+'</b>');
	$('.yesterday .num').text(c.profile[2].values[0].replace('IP','').trim()).next().next().html('IP访问量: <b>'+c.profile[2].values[0]+'</b> 页面浏览量: <b>'+c.profile[2].values[1]+'</b>');
	$('.month .num').text(c.profile[3].values[0].replace('IP','').trim()).next().next().html('IP访问量: <b>'+c.profile[3].values[0]+'</b> 页面浏览量: <b>'+c.profile[3].values[1]+'</b>');
	$('.predict .num').text(c.profile[6].values[0].replace('IP','').trim()).next().next().html('IP访问量: <b>'+c.profile[6].values[0]+'</b> 页面浏览量: <b>'+c.profile[6].values[1]+'</b>');
});
$.getJSON('stats/latest24',function(c){
	$('#traffic_chart').highcharts({
		chart:{
			type:'area',
			events: {
				load:function(){
					setInterval(function(){
						$.post('stats/latest24?time='+new Date().getTime(), {},function(c){
							$.each(c,function(i,d){
								var series = this.series[i];
								$.each(d.data,function(k,s){
									series.addPoint([s[0], s[1]], true, true);
								});
							});
						},'JSON');
					}, 1000*60*5); //5分钟更新一次
				}
			}
		},
		title:{text: '最近24小时流量走势图'},
		subtitle:{text: '每隔5分钟更新一次数据'},
		xAxis:{type: 'datetime',dateTimeLabelFormats:{
			second: '%H:%M:%S',
			minute: '%e. %b %H:%M',
			hour: '%b-%e %H:%M',
			day: '%b-%e',
			week: '%e. %b',
			month: '%b %y',
			year: '%Y'
		}},
		yAxis:{title: {text: ''},min: 0},
		tooltip:{headerFormat: '<b>{series.name}</b><br>',pointFormat: '{point.x:%Y-%b-%e %H:%M}: <b>{point.y}</b>'},
		series: c
	});
});
</script>
